script<template>
  <el-container>
    <el-main class="main-bg">
      <el-form ref="searchForm" :model="searchForm" label-width="80px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="物品名称">
              <el-input
                v-model="searchForm.inBoundName"
                placeholder="请输入物品名称"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="所属仓库">
              <el-select v-model="searchForm.warehouseId" placeholder="请选择">
                <el-option
                  v-for="item in warehouseList"
                  :key="item.warehouse"
                  :label="item.warehouseName"
                  :value="item.warehouseId"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :offset="6" :span="6" class="text-right">
            <el-button
              icon="iconfont iconxianxing_sousuo"
              type="primary"
              @click="handleSearch"
            >
              查询
            </el-button>
            <el-button
              icon="iconfont iconxianxing_zhongzhi"
              @click="handleReset"
            >
              重置
            </el-button>
          </el-col>
        </el-row>
      </el-form>
      <Table
        ref="table"
        :current-page="page"
        :header-data="tableHeader"
        :index="false"
        :loading="loading"
        :page-size="limit"
        :table-data="tableData"
        :total="total"
        class="data-table"
        style="width: 100%"
        @now-page="handlePage"
        @now-size="handleSize"
        @table-sort="handleSort"
      />
    </el-main>
  </el-container>
</template>

<script>
import addTable from "@/mixins/addtable";
import { getWarehouseStoreList, manWithWarehouse } from "./api";
import { parseTime } from "@/utils";

export default {
  name: "GoodList",
  mixins: [addTable],
  data() {
    return {
      searchForm: {
        warehouseId: "",
        inBoundName: "",
      },
      tableHeader: [],
      warehouseList: [],
    };
  },
  created() {
    this.tableHeader = [
      {
        prop: "inBoundName",
        label: "物品名称",
        sortable: false,
        overflow: true,
        align: "left",
      },
      {
        prop: "storeNum",
        label: "库存数量",
        sortable: false,
        overflow: true,
        align: "left",
      },
      {
        prop: "inBoundUnitName",
        label: "计量单位",
        sortable: false,
        overflow: true,
        align: "left",
      },
      {
        prop: "inBoundType",
        label: "规格",
        sortable: false,
        overflow: true,
        align: "left",
      },
      {
        prop: "warehouse",
        label: "所属仓库",
        sortable: false,
        overflow: true,
        align: "left",
      },
      {
        prop: "createdTime",
        label: "入库时间",
        sortable: false,
        overflow: true,
        align: "left",
        width: 180,
        render: (h, vm) => {
          const time = parseTime(vm.createdTime);
          return <span>{time}</span>;
        },
      },
    ];
    this.getTableData();
    this.getData();
  },

  methods: {
    async getData() {
      const { data } = await manWithWarehouse();
      this.warehouseList = data;
    },
    getTableData() {
      this.loading = true;
      this.getTableParams();
      getWarehouseStoreList(this.tableParams)
        .then((res) => {
          if (!res) return;
          const { data, pageInfo } = res;
          setTimeout(() => {
            this.loading = false;
            this.tableData = data;
            this.total = pageInfo.total;
          }, 500);
        })
        .catch((err) => {
          console.log("TCL: getTableData -> err", err);
        });
    },
  },
};
</script>
